import React from 'react'
import TabBar from 'antd-mobile/lib/tab-bar'
import 'antd-mobile/lib/tab-bar/style/css'
import HomeComponents from '../../pages/home/Home'
import CartComponents from '../../pages/cart/Cart'
import ProfileComponents from '../../pages/profile/Profile'
class TabBarComponents extends React.Component {
    constructor(){
        super();
        this.state={
            fullScreen:true,//是否全屏显示
            hidden:false,
            selectedTab:'home',
            tablist:[{
                title:'首页',
                key:'首页',
                icon: "images/common/home1.png",
                selectIcon:'images/common/home2.png',
                badge:0,
                selectText:'home',
                dataSeed:'loId',
                tabComponent:<HomeComponents></HomeComponents>
            },{
                title:'购物',
                key:'购物',
                icon: "images/common/cart1.png",
                selectIcon:'images/common/cart2.png',
                badge:0,
                selectText:'cart',
                dataSeed:'lodId',
                tabComponent:<CartComponents></CartComponents>
            },{
                title:'我的',
                key:'我的',
                icon: "images/common/my1.png",
                selectIcon:'images/common/my2.png',
                badge:0,
                selectText:'profile',
                dataSeed:'loId',
                tabComponent:<ProfileComponents></ProfileComponents>
            }]

        }
    }
    componentWillMount() {
        if(localStorage['selectedTab']){
            this.setState({
                selectedTab:JSON.parse(localStorage['selectedTab'])
            })
        }
        let cart = JSON.parse(localStorage['cart'])
        if(localStorage['cart']){
            let tab = this.state.tablist
            tab[1].badge = cart.length
            this.setState({
                tablist:tab
            })
        }
       
    }
    componentWillReceiveProps(){
         let cart = JSON.parse(localStorage['cart'])
        if(localStorage['cart']){
            let tab = this.state.tablist
            tab[1].badge = cart.length
            this.setState({
                tablist:tab
            })
        }
    }

    render() {
        return(
            <div style={this.state.fullScreen?{position:'fixed',height:'100%',width:'100%',top:0}:{height:400}}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="red"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    {
                        this.state.tablist.map((item,index)=>{
                            return(
                                <TabBar.Item
                                    title={item.title}
                                    key={item.key}
                                    icon={<div style={{
                                        width:'22px',
                                        height:'22px',
                                        background:'url('+item.icon+') center center / 21px 21px no-repeat'}}
                                    />}
                                    selectedIcon={<div style={{
                                        width:'22px',
                                        height:'22px',
                                        background:'url('+item.selectIcon+') center center / 21px 21px no-repeat'}}
                                    />}
                                    selected={this.state.selectedTab===item.selectText}
                                    badge={item.badge}
                                    onPress={()=>{
                                        this.setState({
                                            selectedTab:item.selectText
                                        },()=>{
                                            localStorage.setItem('selectedTab', JSON.stringify(this.state.selectedTab))

                                        })
                                    }}
                                    data-seed={item.dataSeed}
                                >
                                    {item.tabComponent}
                                </TabBar.Item>
                            )
                        })
                    }
                </TabBar>
            </div>
        )
    }
}
export default TabBarComponents;